<template>
  <navigation></navigation>
  <div class="min-h-screen bg-gradient-to-b from-[#B3E0FF] to-[#0077BE]">
    <div class="max-w-7xl mx-auto py-8 px-4">
      <!-- 调试用，实际可删除 -->
<!--      <pre>{{ baseForm }}</pre>-->
      <!-- 头部标题 -->
      <div class="text-center mb-8">
        <h1 class="text-2xl font-medium text-gray-900 mb-2">{{ baseForm?.name || '' }} / 简历</h1>
      </div>
      
      <el-row :gutter="30">
        <!-- 个人信息卡片 -->
        <el-col :span="24">
          <div class="bg-white rounded-lg shadow-md p-6 mb-6 flex">
            <!-- 头像展示 -->
            <div class="w-20 h-20 bg-gray-200 rounded-full overflow-hidden cursor-pointer shadow-md transition-all duration-300 hover:shadow-lg hover:scale-105 flex-shrink-0">
              <img :src="baseForm?.userImg || '/default-avatar.png'" class="w-full h-full object-cover" />
            </div>

            <div class="flex-grow ml-4">
              <h2 class="text-xl font-bold mb-3">{{ baseForm?.name || '' }}</h2>
              
              <div class="flex">
                <div class="flex-1 space-y-2">
                  <div class="flex items-center">
                    <span class="text-blue-500 mr-2">📞</span>
                    <span>{{ baseForm?.phone || '' }}</span>
                  </div>
                  <div class="flex items-center">
                    <span class="text-blue-500 mr-2">📧</span>
                    <span>{{ baseForm?.email || '' }}</span>
                  </div>
                </div>
                
                <div class="flex-1 space-y-2">
                  <div class="flex items-center">
                    <span class="text-blue-500 mr-2">🏫</span>
                    <span>{{ baseForm?.school || '' }} - {{ baseForm?.major || '' }}</span>
                  </div>
                  <div class="flex items-center">
                    <span class="text-blue-500 mr-2">💼</span>
                    <span>{{ baseForm?.workExperience || '' }}年工作经验</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 简历操作卡片 -->
        <el-col :span="24">
          <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow mb-6">
            <div class="flex flex-col h-full">
              <div class="flex-grow">
                <div class="flex justify-between items-start mb-4">
                  <div>
                    <h3 class="text-xl font-semibold">{{ baseForm?.name || '' }}</h3>
                    <p class="text-gray-400 text-sm mt-1">最后更新：{{ formatDate(baseForm?.updateTime || '') }}</p>
                  </div>
                  <el-tag type="success" effect="plain">活跃投递中</el-tag>
                </div>
                
                <div class="mb-6">
                  <p class="text-gray-600 mb-2">求职意向：{{ baseForm?.intendedPosition || '' }}</p>
                  <el-progress :percentage="65" :format="formatProgress" status="success" />
                </div>
                
                <div class="bg-gray-50 p-4 rounded-md mb-6">
                  <h4 class="font-medium text-gray-700 mb-3">核心优势</h4>
                  <ul class="text-gray-600 text-sm space-y-2">
                    <li>• {{ baseForm?.professionalSkill || '' }}</li>
                    <li>• {{ baseForm?.commonSkill || '' }}</li>
                    <li>• {{ baseForm?.selfAssessment || '' }}</li>
                  </ul>
                </div>
              </div>
              
              <div class="flex justify-end space-x-4 mt-6">
                <el-button 
                  size="large" 
                  plain 
                  @click="openDetailDialog"
                  class="min-w-[120px]"
                >
                  <template #icon>
                    <el-icon><Edit /></el-icon>
                  </template>
                  编辑简历
                </el-button>
                <el-button 
                  size="large" 
                  type="primary" 
                  @click="openPreviewDialog"
                  class="min-w-[120px]"
                >
                  <template #icon>
                    <el-icon><View /></el-icon>
                  </template>
                  预览简历
                </el-button>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 新增：简历详细信息卡片 -->
        <el-col :span="24">
          <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow mb-6">
            <h3 class="text-lg font-semibold mb-4 text-blue-700">简历详细信息</h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="姓名">{{ baseForm?.name || '—' }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ baseForm?.email || '—' }}</el-descriptions-item>
              <el-descriptions-item label="学校">{{ baseForm?.school || '—' }}</el-descriptions-item>
              <el-descriptions-item label="专业">{{ baseForm?.major || '—' }}</el-descriptions-item>
              <el-descriptions-item label="意向岗位">{{ baseForm?.intendedPosition || '—' }}</el-descriptions-item>
              <el-descriptions-item label="期望薪资">{{ baseForm?.salaryExpectation || '—' }}</el-descriptions-item>
              <el-descriptions-item label="期望城市">{{ baseForm?.placeExpectation || '—' }}</el-descriptions-item>
              <el-descriptions-item label="GPA">{{ baseForm?.avgGpa || '—' }}</el-descriptions-item>
              <el-descriptions-item label="获奖情况" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.awards || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="专业技能" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.professionalSkill || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="通用技能" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.commonSkill || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="自我评价" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.selfAssessment || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="项目经历" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.projectExperience || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="实习经历" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.internshipExperience || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="课外活动" :span="2">
                <span style="white-space: pre-line;">{{ baseForm?.activityExperience || '—' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="手机号">{{ baseForm?.phone || '—' }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>

        <!-- 编辑简历弹窗 -->
        <el-dialog
          v-model="detailDialogVisible"
          title="编辑简历"
          width="60%"
          top="5vh"
          destroy-on-close
        >
          <el-form :model="editForm" label-width="100px">
            <!-- 基本信息 -->
            <div class="mb-6">
              <h3 class="text-lg font-bold mb-4">基本信息</h3>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="editForm.name" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="头像URL">
                    <el-input v-model="editForm.userImg" placeholder="请输入头像URL"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码">
                    <el-input v-model="editForm.phone" placeholder="请输入手机号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电子邮箱">
                    <el-input v-model="editForm.email" placeholder="请输入电子邮箱"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="期望职位">
                    <el-input v-model="editForm.intendedPosition" placeholder="请输入期望职位"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 教育经历 -->
            <div class="mb-6">
              <h3 class="text-lg font-bold mb-4">教育经历</h3>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="学校名称">
                    <el-input v-model="editForm.school" placeholder="请输入学校名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="专业">
                    <el-input v-model="editForm.major" placeholder="请输入专业名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学历">
                    <el-select v-model="editForm.degree" placeholder="请选择学历" style="width:100%">
                      <el-option label="本科" value="本科"></el-option>
                      <el-option label="硕士" value="硕士"></el-option>
                      <el-option label="博士" value="博士"></el-option>
                      <el-option label="大专" value="大专"></el-option>
                      <el-option label="其他" value="其他"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="毕业时间">
                    <el-date-picker
                      v-model="editForm.graduationTime"
                      type="month"
                      placeholder="选择毕业时间"
                      value-format="YYYY-MM"
                      style="width:100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 工作经历 -->
            <div class="mb-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">工作经历</h3>
                <el-button type="primary" size="small" @click="addWorkExperience">+ 添加经历</el-button>
              </div>
              
              <div v-for="(work, index) in editForm.workExperiences" :key="index" class="mb-4 border-b pb-4">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item :label="index === 0 ? '公司名称' : ''">
                      <el-input v-model="work.company" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="index === 0 ? '职位名称' : ''">
                      <el-input v-model="work.position" placeholder="请输入职位名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="index === 0 ? '开始时间' : ''">
                      <el-date-picker
                        v-model="work.startTime"
                        type="month"
                        placeholder="选择开始时间"
                        value-format="YYYY-MM"
                        style="width:100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="index === 0 ? '结束时间' : ''">
                      <el-date-picker
                        v-model="work.endTime"
                        type="month"
                        placeholder="选择结束时间"
                        value-format="YYYY-MM"
                        style="width:100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item :label="index === 0 ? '工作内容' : ''">
                      <el-input
                        v-model="work.description"
                        type="textarea"
                        :rows="3"
                        placeholder="请描述您的工作职责和成就"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="text-right">
                  <el-button size="small" type="danger" plain @click="removeWorkExperience(index)">删除</el-button>
                </div>
              </div>
            </div>

            <!-- 专业技能 -->
            <div class="mb-6">
              <h3 class="text-lg font-bold mb-4">专业技能</h3>
              <el-form-item>
                <el-input
                  v-model="editForm.professionalSkill"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入您的专业技能，如：精通Figma、Sketch等设计工具"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>

          <template #footer>
            <el-button @click="detailDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveResume">保存并预览</el-button>
          </template>
        </el-dialog>

        <!-- 预览简历弹窗 -->
        <el-dialog
          v-model="previewDialogVisible"
          title="预览简历"
          width="60%"
          top="5vh"
          destroy-on-close
        >
          <div class="preview-content bg-white p-8">
            <!-- 个人信息 - 添加了头像 -->
            <div class="flex justify-between items-start mb-6">
              <div class="flex items-start">
                <div class="w-16 h-16 bg-gray-200 rounded-full overflow-hidden mr-4 flex-shrink-0">
                  <img :src="baseForm?.userImg || '/default-avatar.png'" class="w-full h-full object-cover" />
                </div>
                <div>
                  <h1 class="text-2xl font-bold">{{ baseForm?.name || '' }}</h1>
                  <p class="text-lg text-blue-600">{{ baseForm?.intendedPosition || '' }}</p>
                </div>
              </div>
              <div class="text-right">
                <p class="text-gray-600">{{ baseForm?.phone || '' }}</p>
                <p class="text-gray-600">{{ baseForm?.email || '' }}</p>
              </div>
            </div>

            <!-- 教育经历 -->
            <div class="mb-6">
              <h2 class="text-xl font-bold border-b pb-2 mb-4">教育经历</h2>
              <div class="flex justify-between">
                <div>
                  <p class="font-semibold">{{ baseForm?.school || '' }}</p>
                  <p class="text-gray-600">{{ baseForm?.major || '' }} | {{ baseForm?.degree || '' }}</p>
                </div>
                <div class="text-gray-500">
                  {{ formatEducationDate(baseForm?.graduationTime || '') }}
                </div>
              </div>
              <div class="mt-2 pl-4">
                <ul class="list-disc text-gray-700">
                  <li v-for="(item, index) in baseForm?.educationAchievements || []" :key="index">{{ item }}</li>
                </ul>
              </div>
            </div>

            <!-- 工作经历 -->
            <div class="mb-6" v-if="baseForm?.workExperiences && baseForm.workExperiences.length > 0">
              <h2 class="text-xl font-bold border-b pb-2 mb-4">工作经验</h2>
              <div v-for="(work, index) in baseForm.workExperiences" :key="index" class="mb-4">
                <div class="flex justify-between">
                  <div>
                    <p class="font-semibold">{{ work.company }}</p>
                    <p class="text-gray-600">{{ work.position }}</p>
                  </div>
                  <div class="text-gray-500">
                    {{ formatWorkDate(work.startTime, work.endTime) }}
                  </div>
                </div>
                <div class="mt-2 pl-4">
                  <ul class="list-disc text-gray-700">
                    <li v-for="(desc, descIndex) in work.description.split('\n')" :key="descIndex">{{ desc }}</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 专业技能 -->
            <div class="mb-6">
              <h2 class="text-xl font-bold border-b pb-2 mb-4">专业技能</h2>
              <div class="grid grid-cols-2 gap-4">
                <div v-for="(skill, index) in baseForm?.professionalSkill.split('\n') || []" :key="index" class="flex items-start">
                  <el-icon class="text-blue-500 mr-2 mt-1"><Check /></el-icon>
                  <span>{{ skill }}</span>
                </div>
              </div>
            </div>
          </div>

          <template #footer>
            <el-button @click="previewDialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="exportToImage">导出为图片</el-button>
            <el-button type="success" @click="sendResume">发送简历</el-button>
          </template>
        </el-dialog>

        <!-- AI简历助手 -->
        <el-col :span="24">
          <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">AI 简历助手</h3>
            <p class="text-gray-600 mb-4">您好！我是您的 AI 简历助手，我可以帮您：</p>
            <ul class="list-disc pl-5 text-gray-600 space-y-2 mb-6">
              <li>优化简历内容</li>
              <li>分析简历亮点</li>
              <li>提供求职建议</li>
            </ul>
            <div class="flex gap-2">
              <el-input
                v-model="aiQuestion"
                type="textarea"
                :rows="1"
                placeholder="输入您的问题..."
                class="flex-1"
                resize="none"
              />
              <el-button type="primary" class="h-[38px]" @click="handleSendQuestion">
                发送
              </el-button>
            </div>
          </div>
        </el-col>
        
        <!-- 发送简历卡片 -->
        <el-col :span="24">
          <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-100 mb-6">
            <h3 class="text-lg font-semibold mb-6">发送简历</h3>
    
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div>
                <p class="text-sm text-gray-600 mb-1">收件人邮箱</p>
                <el-input 
                  v-model="emailForm.to"
                  placeholder="请输入收件人邮箱"
                  size="large"
                />
              </div>
      
              <div>
                <p class="text-sm text-gray-600 mb-1">主题</p>
                <el-input 
                  v-model="emailForm.subject"
                  placeholder="请输入邮件主题"
                  size="large"
                />
              </div>
            </div>
    
            <div class="mb-4">
              <p class="text-sm text-gray-600 mb-1">正文</p>
              <el-input
                v-model="emailForm.content"
                type="textarea"
                :rows="5"
                placeholder="请输入邮件正文"
                size="large"
              />
            </div>
    
            <div class="mb-6">
              <div class="flex items-center mb-2">
                <el-icon class="text-blue-500 mr-2"><Upload /></el-icon>
                <span class="text-sm text-gray-600">添加附件</span>
              </div>
              <el-upload
                v-model:file-list="emailForm.attachments"
                action="#"
                :auto-upload="false"
                :on-change="handleFileChange"
                class="w-full"
              >
                <template #trigger>
                  <el-input
                    placeholder="点击选择文件或拖拽到此处"
                    readonly
                    class="cursor-pointer"
                  >
                    <template #suffix>
                      <el-icon class="el-input__icon"><FolderOpened /></el-icon>
                    </template>
                  </el-input>
                </template>
              </el-upload>
            </div>
    
            <div class="flex justify-end space-x-4">
              <el-button size="large" @click="saveDraft">保存草稿</el-button>
              <el-button type="primary" size="large" @click="sendEmail">发送</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { 
  School, Monitor, Edit, View, Check, Upload, FolderOpened 
} from '@element-plus/icons-vue';
import navigation from '../../views/navigation.vue';
import html2canvas from 'html2canvas';
import axios from 'axios';
import { getResume } from '@/api/student/resumeCenter/stuResume';

// 弹窗控制
const detailDialogVisible = ref(false);
const previewDialogVisible = ref(false);
const aiQuestion = ref('');

// 编辑表单
const editForm = ref({
  name: '',
  userImg: '',
  phone: '',
  email: '',
  intendedPosition: '',
  school: '',
  major: '',
  degree: '本科',
  graduationTime: '',
  workExperiences: [],
  professionalSkill: ''
});

// 基础信息
const baseForm = ref({});

// 邮件表单
const emailForm = ref({
  to: '',
  subject: '',
  content: '',
  attachments: []
});

// API基础URL
const API_BASE_URL = 'http://localhost:8081';

// 获取简历详情
const fetchResumeDetail = async () => {
  try {
    const response = await getResume();
    // 兼容两种返回结构
    let data = response?.data || response;
    if (typeof data !== 'object' || data === null) data = {};
    baseForm.value = data;
    console.log('最终赋值 baseForm:', baseForm.value);
  } catch (error) {
    ElMessage.error('获取简历信息失败');
    console.error('获取简历信息失败', error);
    baseForm.value = {};
  }
};

// 打开编辑弹窗
const openDetailDialog = () => {
  editForm.value = JSON.parse(JSON.stringify(baseForm.value));
  detailDialogVisible.value = true;
};

// 打开预览弹窗
const openPreviewDialog = () => {
  previewDialogVisible.value = true;
};

// 添加工作经历
const addWorkExperience = () => {
  editForm.value.workExperiences.push({
    company: '',
    position: '',
    startTime: '',
    endTime: '',
    description: ''
  });
};

// 删除工作经历
const removeWorkExperience = (index) => {
  editForm.value.workExperiences.splice(index, 1);
};

// 保存简历
const saveResume = async () => {
  try {
    const response = await axios.put(`${API_BASE_URL}/resumeCenter/updateResume`, editForm.value);
    baseForm.value = response.data.data;
    ElMessage.success('简历保存成功');
    detailDialogVisible.value = false;
  } catch (error) {
    ElMessage.error('保存简历失败');
    console.error(error);
  }
};

// 导出为图片
const exportToImage = async () => {
  try {
    const printElement = document.querySelector('.preview-content');
    const canvas = await html2canvas(printElement, {
      scale: 2,
      useCORS: true,
      backgroundColor: '#ffffff'
    });
    
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = `简历_${baseForm.value.name}_${new Date().getTime()}.png`;
    link.click();
    ElMessage.success('导出成功');
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败');
  }
};

// 发送简历
const sendResume = () => {
  previewDialogVisible.value = false;
  emailForm.value.subject = `求职申请-${baseForm.value.name}-${baseForm.value.intendedPosition}`;
  emailForm.value.content = `尊敬的HR：
  
  您好！
  
  我对贵公司发布的职位非常感兴趣，随信附上我的个人简历，期待能有机会与您进一步沟通。
  
  此致
  敬礼
  
  ${baseForm.value.name}
  ${baseForm.value.phone}`;
};

// 发送邮件
const sendEmail = async () => {
  try {
    const formData = new FormData();
    formData.append('to', emailForm.value.to);
    formData.append('subject', emailForm.value.subject);
    formData.append('content', emailForm.value.content);
    
    emailForm.value.attachments.forEach(file => {
      formData.append('attachments', file.raw);
    });

    await axios.post(`${API_BASE_URL}/email/send`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    
    ElMessage.success('邮件发送成功');
  } catch (error) {
    ElMessage.error('邮件发送失败');
    console.error(error);
  }
};

// 保存草稿
const saveDraft = () => {
  localStorage.setItem('resumeDraft', JSON.stringify(emailForm.value));
  ElMessage.success('草稿保存成功');
};

// 处理文件上传
const handleFileChange = (file) => {
  emailForm.value.attachments.push(file);
};

// 处理AI问题
const handleSendQuestion = async () => {
  if (!aiQuestion.value.trim()) {
    ElMessage.warning('请输入问题');
    return;
  }
  
  try {
    const response = await axios.post(`${API_BASE_URL}/ai/ask`, {
      question: aiQuestion.value,
      resumeId: baseForm.value.id
    });
    ElMessage.success(response.data.answer);
  } catch (error) {
    ElMessage.error('获取回答失败');
    console.error(error);
  }
};

// 日期格式化
const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return `${d.getFullYear()}.${(d.getMonth() + 1).toString().padStart(2, '0')}`;
};

const formatEducationDate = (date) => {
  if (!date) return '';
  const [year, month] = date.split('-');
  return `${year}.${month.padStart(2, '0')}`;
};

const formatWorkDate = (start, end) => {
  const startDate = start ? formatEducationDate(start) : '';
  const endDate = end === '至今' ? '至今' : (end ? formatEducationDate(end) : '');
  return `${startDate} - ${endDate}`;
};

// 进度条格式化
const formatProgress = (percentage) => {
  return `完成度: ${percentage}%`;
};

onMounted(() => {
  fetchResumeDetail();
  
  // 加载草稿
  const draft = localStorage.getItem('resumeDraft');
  if (draft) {
    emailForm.value = JSON.parse(draft);
  }
});
</script>

<style scoped>
.preview-content {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.preview-content h1 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.preview-content h2 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.preview-content ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.preview-content li {
  margin-bottom: 0.3rem;
}

.border-b {
  border-bottom: 1px solid #eaeaea;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .preview-content {
    padding: 1rem;
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .el-dialog {
    width: 95% !important;
  }
}

pre {
  background: #f8f8f8;
  color: #333;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 14px;
}
</style>